<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="plugins/element-ui/lib/theme-chalk/index.css">
    <style>
        .title{
            display: flex;
            justify-content: center;
            color: #3a8ee6;
        }
        .base {
            display: flex;
            justify-content: center;
        }
        .school{
            display: flex;
            justify-content: center;
        }
        .home {
            display: flex;
            justify-content: center;
        }
        .mine{
            display: flex;
            justify-content: center;
        }
        .desc{
            display: flex;
            justify-content: center;

        }
        .opt{
            display: flex;
            justify-content: center;
        }
    </style>
</head>
<body>
<div id="app">
    <el-tag>打回的id：{{id}}</el-tag>
    <h1 class="title">请填写基本信息</h1>
    <el-form ref="form" :model="form" label-width="80px">
<!--        <div class="base">-->
        <el-form-item label="姓名">
            <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
            <el-input v-model="form.age" placeholder="请输入年龄"></el-input>
        </el-form-item>
        <el-form-item label="性别">
            <el-select v-model="form.sex" placeholder="请选择性别">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
            </el-select>
        </el-form-item>
<!--        </div>-->
<!--        <div class="school">-->
        <el-form-item label="学校">
            <el-input v-model="form.school" placeholder="请输入您的学校"></el-input>
        </el-form-item>
        <el-form-item label="专业">
            <el-input v-model="form.major" placeholder="请输入专业"></el-input>
        </el-form-item>
        <el-form-item label="年级">
            <el-input v-model="form.grade" placeholder="请输入入学年份,如2023"></el-input>
        </el-form-item>
<!--        </div>-->
<!--        <div class="home">-->
        <el-form-item label="家庭住址">
            <el-input v-model="form.address" placeholder="请输入家庭住址"></el-input>
        </el-form-item>
        <el-form-item label="电话">
            <el-input v-model="form.phone" placeholder="请输入电话"></el-input>
        </el-form-item>
        <el-form-item label="父母电话">
            <el-input v-model="form.parentPhone" placeholder="请输入父母电话"></el-input>
        </el-form-item>
<!--        </div>-->
<!--        <div class="mine">-->
        <el-form-item label="考研或就业">
            <el-input v-model="form.study" placeholder="考研或就业"></el-input>
        </el-form-item>
        <el-form-item label="爱好">
            <el-input v-model="form.hobby" placeholder="请输入爱好"></el-input>
        </el-form-item>
        <el-form-item label="身份证">
            <el-input v-model="form.idNumber" placeholder="请输入身份证号"></el-input>
        </el-form-item>
<!--        </div>-->
<!--        <el-form-item label="描述" class="desc">-->
        <el-input type="textarea" v-model="form.description" placeholder="请输入您的留言"></el-input>
        </el-form-item>
        <el-form-item class="opt">
            <el-button type="primary" @click="onSubmit('form', false)" style="margin-right: 200px">提交</el-button>
            <el-button>取消</el-button>
        </el-form-item>
    </el-form>
</div>
<script src="plugins/vue/vue.js"></script>
<script src="plugins/element-ui/lib/index.js"></script>
<!-- 引入axios -->
<script src="plugins/axios/axios.min.js"></script>
<script src="js/request.js"></script>
<script src="js/validate.js"></script>
<script src="js/index.js"></script>
<script src="api/stuA.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            id:'',
            actionType:'',
            form: {
                name: '',
                age:'',
                major:'',
                grade:'',
                school:'',
                sex:'',
                address:'',
                phone:'',
                parentPhone:'',
                hobby:'',
                idNumber:'',
                description: ''
            }
        },
        computed: {},

        created() {
            this.id = requestUrlParam('id');//从网址上解析参数
            this.actionType = this.id ? 'edit' : 'add';
            if (this.id) {
                this.init()
            }
        },
        mounted() {

        },
        methods: {
            async init () {
                //发起一个异步请求，获取用户信息
                queryStuAById(this.id).then(res => {
                    if (String(res.code) === '1') {
                        // console.log(res.data);
                        this.form = res.data;
                    } else {
                        this.$message.error(res.msg || '操作失败')
                    }
                })
            },
            goBack(){
                window.parent.menuHandle({
                    id: '6',
                    url: '/back/page/stuA/list.html',
                    name: '班级管理'
                },false)
            },
            onSubmit(formName, st) {
                var _this = this
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (this.actionType === 'add') {
                            let params = {...this.form};
                            console.log(params)
                            this.$confirm('是否提交?', '提示', {
                                'confirmButtonText': '确定',
                                'cancelButtonText': '取消',
                                'type': 'warning'
                            }).then(() => {//点击确定执行
                                submit(params).then(res => {
                                    if (res.code === 1) {
                                        this.$message.success('提交成功！');
                                        location.href="success.html"
                                    } else {
                                        this.$message.error(res.msg || '操作失败')
                                    }
                                }).catch(err => {
                                    this.$message.error('请求出错了：' + err)
                                })
                            })
                            console.log('submit!');
                        } else {
                            const params = {
                                ...this.form,
                            };
                            editStuA(params).then(res => {
                                if (res.code === 1) {
                                    this.$message.success('信息重新提交成功！');
                                    setTimeout(function (){
                                        _this.goBack()
                                    },1000);
                                } else {
                                    this.$message.error(res.msg || '操作失败')
                                }
                            }).catch(err => {
                                this.$message.error('请求出错了：' + err)
                            })
                        }
                    } else {
                        console.log('error submit!!');
                        return false
                    }
                })





            }
        },
    });

</script>
</body>
</html>